<template>
  <div class="headers">
    <h3>人力资源后台管理系统</h3>
    <!-- <el-button v-throttle:click="handleClick">点击测试</el-button>
    <el-input v-model="value" v-debounce:input="handleClick"></el-input> -->
    <div class="edit">
      <el-dropdown @command="handelEdit">
        <el-button type="primary">
          操作<el-icon class="el-icon--right"><arrow-down /></el-icon>
        </el-button>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item command="option1">退出</el-dropdown-item>
            <!-- <el-dropdown-item>Action 2</el-dropdown-item> -->
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, toRefs, onMounted } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { useStore } from "@/store/user";
const router = useRouter();
const store = useStore();
const handleClick = () => {
  console.log(122);
};
const handelEdit = (val) => {
  if (val == "option1") {
    ElMessageBox.confirm("确定退出吗. Continue?", "Warning", {
      confirmButtonText: "确认",
      cancelButtonText: "取消",
      type: "warning",
    })
      .then(() => {
        // store.$reset()
        // window.localStorage.clear()
        // window.sessionStorage.clear()
        if (store.isCollapse) {
          clearInterval(store.isCollapse);
          store.isCollapse = null;
        }
        router.push("/login");
        ElMessage({
          type: "success",
          message: "已退出",
        });
      })
      .catch(() => {
        ElMessage({
          type: "info",
          message: "取消退出",
        });
      });
  }
};
</script>
<style scoped lang="less">
.headers {
  width: 100%;
  display: flex;
  align-items: center;
  height: 100%;
  justify-content: space-between;
  // background: linear-gradient(to right, #00B4DB, #0083B0);
  h3 {
    margin-left: 20px;
    color: white;
  }
  .edit {
    margin-right: 2%;
  }
}
</style>
